<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>list</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<script type="text/javascript" src="js/jquery-easyui-1.2.6/jquery-1.7.2.min.js"></script>
	<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.2.6/themes/default/easyui.css" />
	<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.2.6/themes/icon.css" />
	<script type="text/javascript" src="js/jquery-easyui-1.2.6/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="js/jquery-easyui-1.2.6/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript">
    	$(function(){
    		$('#datagrid').datagrid({
				url: '<%=basePath%>user?action=list',
				title:'用户列表',
				striped: true,//显示条纹
				sortName: 'userId',//默认排序字段
				sortOrder: 'desc',//排序顺序asc,desc
				idField:'userId',//id字段，表明该列是一个唯一列。
	            rownumbers:true, //行号
	            selectOnCheck:true,
				singleSelect:true,
				pagination:true,//分页控件
				pageSize: 10,//每页记录数       
	            pageList: [5,10,15,20,25], //分页记录数数组
				loadMsg:'正在查询，请稍等...',
				fitColumns: true,//自适应列宽
				onDblClickRow:function(rowIndex, rowData){
					viewDetail(rowData.userId);
				},
				columns:[[
				    {field:'userId',title:'编号',width:50,align:'center',checkbox:true},
				    {field:'account',title:'账号',width:50,align:'center'},
				    {field:'password',title:'密码',width:50,align:'center'},
				    {field:'age',title:'年龄',width:50,align:'center'}
				]]
				
			});
    		
    	});
    	
    	//新增弹出框
    	function openDialog(){
			$("#dialog").dialog("open").dialog("setTitle","添加用户信息");
			$("#fm").form('clear');
			url="user?action=save";
<%-- $("#name").removeAttr("readonly"); --%>
		}
    	//关闭弹出窗口
    	function closeDialog(){
    		$("#dialog").dialog("close");
    		$("#fm").form('clear');
    	}
    	//新增
    	function saveOrUpdateUser(){
    		$("#fm").form("submit",{
                url: url,
	            onsubmit: function () {
	                return $(this).form("validate");
	            },
	            success: function (result) {
	                if ("1" == result) {
	                    $.messager.alert("提示信息", "操作成功");
	                    $("#dialog").dialog("close");
	                    $("#datagrid").datagrid("load");
	                }
	                else {
	                    $.messager.alert("提示信息", "操作失败");
	                    $("#dialog").dialog("close");
	                    $("#datagrid").datagrid("load");
	                }
	            }
    		});
    	}
    	
    	
    	//删除
    	function deleteUser(){
    		var row = $('#datagrid').datagrid('getSelected');
            if (row) {
                $.messager.confirm('提示', '确定删除选中的记录?', function (r) {
                    if (r) {
                        $.post('user?action=delete', { id: row.userId }, function (result) {
                            if ("1" == result) {
                            	$.messager.alert("提示信息", "删除成功");
                                $("#datagrid").datagrid('reload');    
                            } else {
                            	$.messager.alert("提示信息", "删除失败");
                            }
                        }, 'json');
                    }
                });
            }
    	}
    	
    	//修改
    	function openModifyDialog(){
    		var selectedRows=$("#datagrid").datagrid('getSelections');
    		if(selectedRows.length!=1){
    			$.messager.alert('系统提示','请选择一条要编辑的数据！');
    			return;
    		}
    		var row=selectedRows[0];
    		$("#dialog").dialog("open").dialog("setTitle","修改用户信息");
    		$("#fm").form("load",row);
    		url="user?action=update&userId="+row.userId;
    		 if ("1" == result) {
             	$.messager.alert("提示信息", "修改成功");
                 $("#datagrid").datagrid('reload');    
             } else {
             	$.messager.alert("提示信息", "修改失败");
                 $("#fm").dialog("close");
             }
    	}
    	
    	//查询
    	function query() {
    	    $('#datagrid').datagrid('reload',{
    	    'account': $("#account").val()
    	        });
    	}

    	//重置
    	function reset() {
    		$("#queryform").form("clear");
    	}
    	
    </script>
  </head>
  
  <body>
  	<!-- 查询条件区域 -->
 	<div id="tab">
		<table>
			<a href="javascript:openDialog()" class="easyui-linkbutton" iconCls="icon-add" plain="true">添加</a>
			<a href="javascript:openModifyDialog()" class="easyui-linkbutton" iconCls="icon-edit" plain="true">修改</a>
			<a href="javascript:deleteUser()" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>
		</table>
	</div>
  	<!-- 查询条件区域 -->
	  <div id="search_area" >
	    <form action="" id="queryform">
	      <table border="0">
	        <tr>
	          <td>&nbsp;账号：</td>
	          <td><input  name="account" id="account"  /></td>
	          <td>
	              <a  href="javascript:void(0)" class="easyui-linkbutton my-search-button" iconCls="icon-search" plain="true" onclick="query()">查询</a> 
	              <a  href="javascript:void(0)" class="easyui-linkbutton my-search-button" iconCls="icon-undo" plain="true" onclick="reset()">重置</a>
	          </td>
	        </tr>
	      </table>
	     </form>
	  </div>
  	  <!-- 数据表格区域 -->
 	  <div id="datagrid"></div>
 	  <!-- 表单 -->
 	  <div id="dialog" class="easyui-dialog" style="width: 570px;height: 350px;padding: 10px 20px" closed="true" buttons="#button">
		  <form id="fm" method="post">
		  	<table cellspacing="5px;">
		  		<tr>
		  			<td>账号：</td>
		  			<td><input type="text" id="account" name="account" class="easyui-validatebox" required="true"/></td>
		  		</tr>
		  		<tr>
		  			<td>密码：</td>
		  			<td><input type="text" id="password" name="password" class="easyui-validatebox" required="true"/></td>
		  		</tr>
		  		<tr>
		  			<td>年龄：</td>
		  			<td><input type="text" id="age" name="age" class="easyui-validatebox" required="true"/></td>
		  		</tr>
		  	</table>
		  </form>
		</div>
		<!-- 确认按钮 -->
		<div id="button">
			<a href="javascript:saveOrUpdateUser()" class="easyui-linkbutton" iconCls="icon-ok" >保存</a>
			<a href="javascript:closeDialog()" class="easyui-linkbutton" iconCls="icon-cancel" >关闭</a>
		</div>
  </body>
</html>
